<template v-if="!item.hidden">
  <template
    v-if="
        hasOneShowingChild(item.children, item) &&
        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
        !item.alwaysShow
      "
  >
    <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
      <el-menu-item v-if="onlyOneChild.meta" :index="resolvePath(onlyOneChild.path)">
        <i v-if="item.meta?.icon" class="sub-el-icon" :class="item.meta.icon"></i>
        <template #title>
            <span>{{onlyOneChild.meta.title}}</span>
        </template>
      </el-menu-item>
    </app-link>
  </template>

  <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)">
    <template #title>
      <i v-if="item.meta?.icon" class="sub-el-icon" :class="item.meta.icon"></i>
      <span v-if="item.meta?.title" >{{item.meta.title}}</span>
    </template>
    <sidebar-item
      v-for="child in item.children"
      :key="child.path"
      :is-nest="true"
      :item="child"
      :base-path="resolvePath(child.path)"
      class="nest-menu"
    />
  </el-sub-menu>

</template>

<script setup>
import path from "path-browserify"
import Item from "./Item.vue"
import AppLink from "./Link.vue"
import { isExternal } from "utils/validate"
import { defineProps, ref } from "vue"

const props = defineProps({
  // route object
  item: {
    type: Object,
    required: true
  },
  isNest: {
    type: Boolean,
    default: false
  },
  basePath: {
    type: String,
    default: ""
  }
})
const onlyOneChild = ref(null)
const hasOneShowingChild = (children = [], parent) => {
  const showingChildren = children.filter(item => {
    if (item.hidden) {
      return false
    } else {
      // Temp set(will be used if only has one showing child)
      onlyOneChild.value = item
      return true
    }
  })
  // When there is only one child router, the child router is displayed by default
  if (showingChildren.length === 1) {
    return true
  }
  // Show parent if there are no child router to display
  if (showingChildren.length === 0) {
    onlyOneChild.value = { ...parent, path: "", noShowingChildren: true }
    return true
  }
  return false
}
// console.log(props)
const resolvePath = routePath => {
  if (isExternal(routePath)) {
    return routePath
  }
  if (isExternal(props.basePath)) {
    return props.basePath
  }
  // console.log(props.basePath)
  // console.log(routePath)
  return path.resolve(props.basePath, routePath)
}
</script>
<style lang="scss" scoped>
.sub-el-icon {
  color: currentColor;
  width: 1em;
  height: 1em;
}
</style>
